<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>注册</title>
    <link rel="stylesheet" href="../css/reset.css">
    <link rel="stylesheet" href="../css/regist.css">
    <script src="../js/jquery.js"></script>
    <script src="../js/jquery.in.js"></script>
    <script>
        $(function () {
            var inp = document.querySelectorAll('#myform>input')
            var submit = inp[inp.length - 1];
            var oSpan = document.querySelectorAll('#myform>span');
            var rank = document.querySelectorAll('#rank')[0];
            var password = document.querySelectorAll('#password')[0];
            var dbspan = document.querySelectorAll('.dbpwd')[0];

            var reg = { //验证正则
                'username': /^[A-z]\w{5,15}$/,
                'password': /^.{6,16}$/,
                'email': /^\w{6,}@[A-z0-9]{2,}\.[A-z]{2,}\.?[A-z]*$/,
                'phone': /^1[356789]\d{9}$/,
                'rank': /^\d{6}$/
            }
            var flag;
            $('#phone').change(function () {
                if (reg.phone.test(this.value)) {
                    $('.phone').html(' ');
                    $('.phone').removeClass('red');
                    $('.phone').addClass('green');
                    flag=true;
                } else {
                    $('.phone').html('请输入有效的手机号');
                    $('.phone').removeClass('green');
                    $('.phone').addClass('red');
                    flag=false;
                }
            });
            $('#rank').change(function () {
                if (reg.rank.test(this.value)) {
                    $('.rank').html('验证通过');
                    $('.rank').removeClass('red');
                    $('.rank').addClass('green');
                    flag=true;
                } else {
                    $('.rank').html('验证失败，请正确输入六位验证码');
                    $('.rank').removeClass('green');
                    $('.rank').addClass('red');
                    flag=false
                }
            });
            $('#password').change(function () {
                if (reg.password.test(this.value)) {
                    $('.password').html(' ');
                    $('.password').removeClass('red');
                    $('.password').addClass('green');
                    flag=true;
                } else {
                    $('.password').html('密码必须大于6位,请重新输入');
                    $('.password').removeClass('green');
                    $('.password').addClass('red');
                    flag=false;
                }
            });


            $('#dbpwd').change(function () {
                if ($(this).val() === $('#password').val()) {
                    $('.dbpwd').html(' ');
                    $('.dbpwd').removeClass('red');
                    $('.dbpwd').addClass('green');
                } else {
                    $('.dbpwd').html('两次密码不一致，请重新输入');
                    $('.dbpwd').removeClass('green');
                    $('.dbpwd').addClass('red');
                }
            });
            if(flag){
                $('.submit').addClass('kid');
            }
            
        });
        
        
    </script>
</head>

<body class="wrapper">
    <!-- 头部 -->
    <header>
        <div class="top">
            <a href="./fvancl.html">
                <img src="../img/logo18546.png" alt="">
            </a>
        </div>
    </header>
    <!-- 主体 -->
    <main>
        <!-- <form action="../php/regist.php" method="POST"> -->
        <div class="regist">
            <h1>
                注册新用户
                <span>
                    我已经注册，现在就
                    <a href="./login.html">登录</a>
                </span>
            </h1>
            <div style="width: 100%; height: 10px; overflow: hidden; clear: both;"></div>
            <div class="log-left">
                <ul>
                    <li>
                        <input type="text" class="input-code" placeholder="验证码">
                        <span class="code" title="点击切换">
                            <span style="color:#74675a;display:inline-block;transform:rotate(-8deg);">4</span>
                            <span style="color:#135784;display:inline-block;transform:rotate(14deg);">7</span><span
                                style="color:#654321;display:inline-block;transform:rotate(28deg);">Q</span>
                            <span style="color:#c317e3;display:inline-block;transform:rotate(-30deg);">V</span>
                            <span style="color:#02468a;display:inline-block;transform:rotate(40deg);">Y</span>
                            <span style="color:#123345;display:inline-block;transform:rotate(-24deg);">P</span>
                        </span>
                        <span class="c2"></span>
                    </li>
                    <li>
                        <input type="text" id="phone" name="phone" placeholder="请输入手机号">
                        <a href="javascript:;">获取短信验证码</a>
                        <span class="phone"></span>
                    </li>
                    <li class="wid">
                        <input type="text" id="rank" name="rank" placeholder="填写手机验证码">
                        <span class="rank"></span>
                    </li>
                    <li class="wid">
                        <input type="password" id="password" name="password" placeholder="设定登录密码">
                        <span class="password"></span>
                    </li>
                    <li class="wid">
                        <input type="password" id="dbpwd" name="dbpwd" placeholder="再次输入密码">
                        <span class="dbpwd"></span>
                    </li>
                    <li>
                        <div class="ck-a">
                            <input type="checkbox" id="ck-ag">
                            <label for="ck-ag">
                                请阅读
                                <a href="javascript:;">《VANCL凡客诚品服务条款》</a>
                            </label>
                        </div>
                        <div class="submit">
                            <a href="">立即注册</a>
                        </div>
                    </li>
                </ul>
            </div>
            <div class="log-right">
                <img src="../img/login120412_newlogo.jpg" alt="">
            </div>
        </div>
        <!-- </form> -->
        <script>
            $('.submit').on('click', function () {

                $.get('../php/regist.php', {
                    "phone": $('#phone').val(),
                    "password": $('#password').val()
                }, function (data) {
                    console.log(data)
                    var a = JSON.parse(data);
                    console.log(a.hash);
                    if (a.hash) {
                        // console.log('该手机号已注册')
                        location.href = '../html/login.html';
                    }
                    //  else {
                        
                    // }
                });
            });
        </script>
    </main>
    <!-- 尾部 -->
    <footer>
        <div class="btm">
            <div class="text-p">
                <p>Copyright 2007 - 2019 vancl.com All Rights Reserved 京ICP证100557号 京公网安备11011502002400号
                    出版物经营许可证新出发京批字第直110138号</p>
                <p> 凡客诚品（北京）科技有限公司</p>
            </div>
            <div class="partner">
                <a href="javascript:;"></a>
                <span></span>
                <a href="javascript:;"></a>
                <a href="javascript:;"></a>
            </div>
        </div>
    </footer>
</body>

</html>